<template>
	<view>
		<view>
			<table-title content="空调加时申请表"></table-title>
			<view>
				<small-title content="基本资料"></small-title>
				<view class="item-table">
					<view-item name="申请人" :value="userMsg.userName"></view-item>
					<view-item name="手机号码" :value="userMsg.userPhone"></view-item>
					<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
					<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
					<view-item name="单元号" :isLast="true" :value="userMsg.room"></view-item>
				</view>
			</view>
			<small-title content="时间段"></small-title>
			<view v-for="(n,index) in number" :key="index">
				<view class="item-table" style="margin-bottom: 10rpx;">
					<view class="picker-block">
						<view class="picker-note">起始时间</view>
						<picker mode="date" style="width: 200rpx;" @change="changeStartDate($event,n)">
							{{timeArr[index].startDate}}
						</picker>
						<picker :range="startTimes[index]" @change="startTimesChange(index,$event)" mode="multiSelector"
							style="margin-left: 30rpx;">
						    {{  startTimes[index][0][startHourIndex[index]] }}:{{ startTimes[index][1][startMinuteIndex[index]]  }}
						</picker>
					</view>
					<view class="picker-block">
						<view class="picker-note">结束时间</view>
						<picker mode="date" style="width: 200rpx;" @change="changeEndDate($event,n)">
							{{timeArr[index].endDate}}
						</picker>
						<picker :range="times[index]" @change="timesChange(index,$event)" mode="multiSelector"
							style="margin-left: 30rpx;">
						    {{  times[index][0][hourIndex[index]] }}:{{ times[index][1][minuteIndex[index]]  }}
						</picker>
					</view>
				</view>
			</view>
			<button class="add-button" @click="addNumber()">+</button>
			<view>
				<small-title content="支付费用"></small-title>
				<view style="display: flex;justify-content: center;">
					<radio-group class="payway-style">
						<label style="display: flex;">
							<radio class="first-radio" color="#FF0000" value="alipay" :checked="alipayChecked"></radio>
							<view class="payway-choice" style="border-bottom: none;">
								<image src="@/static/alipay-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">支付宝支付</view>
							</view>
						</label>
						<label style="display: flex;">
							<radio class="second-radio" color="#FF0000" value="wechat"></radio>
							<view class="payway-choice">
								<image src="@/static/wechat-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">微信支付</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view>
				<small-title content="开票信息"></small-title>
				<radio-group class="invoice-group" @change="chooseInvoiceType">
					<label class="invoice-choice">
						<radio value="person" :checked="personFlag"></radio>
						<view>个人</view>
					</label>
					<label class="invoice-choice">
						<radio value="company"></radio>
						<view>单位</view>
					</label>
				</radio-group>
				<view class="item-table" v-if="companyFlag">
					<input-item typeMsg="发票抬头" @getValue="setInvoiceHead"></input-item>
					<input-item typeMsg="税号" @getValue="setCompanyTaxNumber"></input-item>
					<input-item typeMsg="开户银行" :isEmpty="true" @getValue="setCompanyBank"></input-item>
					<input-item typeMsg="银行账号" :isEmpty="true" @getValue="setCompanyBankAccount"></input-item>
					<input-item typeMsg="企业地址" :isEmpty="true" @getValue="setCompanyAddress"></input-item>
					<input-item typeMsg="企业电话" :isLast="true" :isEmpty="true" @getValue="setCompanyPhone"></input-item>
				</view>
				<view class="item-table" v-if="personFlag">
					<input-item typeMsg="发票抬头" :isLast="true" @getValue="setInvoiceHead"></input-item>
				</view>
			</view>
			<button class="confirm-button" @click="submit">确认</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				earliestTime: '',
				earliestDate: '',
				singePrice: 0,
				number: 1,
				wechatChecked: false,
				alipayChecked: true,
				personFlag: true,
				companyFlag: false,
				times:[
				    [
						['00','01','02','03','04','05','06','07','08','09','10','11','12',
							'13','14','15','16','17','18','19','20','21','22','23'],
						['00','30']
					]
				],
				startTimes:[
				    [
						['00','01','02','03','04','05','06','07','08','09','10','11','12',
							'13','14','15','16','17','18','19','20','21','22','23'],
						['00','30']
					]
				],
				startHourIndex: [0],
				startMinuteIndex: [0],
				hourIndex: [0],
				minuteIndex: [0],
				timeArr: [
					{'startDate':'1111-11-11','endDate':'2222-22-22',
						'startTime':'11:00','endTime':'22:00'}
				],
				userMsg:{'userName':'李阳','userPhone':'13565137716',
					'userCompany':'福建海峡科技有限公司','userBuilding':'福建八闽大厦','room':'1501',
				},
				companyInvoiceMsg:{
					'invoiceHead':'','taxNumber':'','bankName':'','bankAccount':'',
					'companyAddress':'','companyPhone':''
				},
				personalInvoiceMsg:{
					'invoiceHead':''
				},
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		mounted() {
			uni.request({
				url:'http://192.168.3.172:3000/mock/27/v1/air/queryAirPriceByBuildingId',
				header:{
					'Content-Type' : 'application/json'
				},
				data:{
					'buildingId' : 1111
				},
				success: (res) => {
					this.singePrice = res.data.result.airPrice
				}
			})
		},
		methods: {
			startTimesChange(index,e){
				let startHourIndexTmp = this.startHourIndex
				startHourIndexTmp[index] = e.detail.value[0]
				let startMinuteIndexTmp = this.startMinuteIndex
				startMinuteIndexTmp[index] = e.detail.value[1]
				let chooseTime = this.timeArr[index].startDate + " " +
					this.startTimes[index][0][startHourIndexTmp[index]] + ":" + 
					this.startTimes[index][1][startMinuteIndexTmp[index]] + ":00"
				if( ( new Date(chooseTime).getTime() ) < ( new Date(this.earliestTime).getTime() ) ){
					uni.showModal({
						content:'不能早于最早时间',
						showCancel:false
					})
				}else{
					this.startHourIndex = [...startHourIndexTmp]
					this.startMinuteIndex = [...startMinuteIndexTmp]
					this.timeArr[index].startTime = this.startTimes[index][0][this.startHourIndex[index]] + ":" + 
						this.startTimes[index][1][this.startMinuteIndex[index]]
				}
			},
			timesChange(index,e){
				let hourIndexTmp = this.hourIndex
				hourIndexTmp[index] = e.detail.value[0]
				let minuteIndexTmp = this.minuteIndex
				minuteIndexTmp[index] = e.detail.value[1]
				let chooseTime = this.timeArr[index].endDate + " " +
					this.times[index][0][hourIndexTmp[index]] + ":" +
					this.times[index][1][minuteIndexTmp[index]] + ":00"
				let chooseStartTime = this.timeArr[index].startDate + " " + this.timeArr[index].startTime
				if( ( new Date(chooseTime).getTime() ) < ( new Date(chooseStartTime).getTime() ) ){
					uni.showModal({
						content:'结束时间不能早于开始时间',
						showCancel:false
					})
				}else{
					this.hourIndex = [...hourIndexTmp]
					this.minuteIndex = [...minuteIndexTmp]
					this.timeArr[index].endTime = this.times[index][0][this.hourIndex[index]] + ":" +
						this.times[index][1][this.minuteIndex[index]]
				}
			},
			addNumber() {
				this.number++
				let year = new Date().getFullYear()
				let month = new Date().getMonth() + 1
				let date = new Date().getDate()
				let hour = new Date().getHours()+1
				month = month > 9 ? month : '0' + month
				date = date > 9 ? date : '0' + date
				hour = hour > 9 ? hour : '0' + hour
				let nowDate = year + '-' + month + '-' + date
				let nowTime = hour + ':00'
				let addRecord = [{'startDate':nowDate,'endDate':nowDate,
					'startTime':nowTime,'endTime':nowTime}]
				let timeTmp = [
				    [
						['00','01','02','03','04','05','06','07','08','09','10','11','12',
							'13','14','15','16','17','18','19','20','21','22','23'],
						['00','30']
					]
				]
				let startTimeTmp = [
				    [
						['00','01','02','03','04','05','06','07','08','09','10','11','12',
							'13','14','15','16','17','18','19','20','21','22','23'],
						['00','30']
					]
				]
				this.startTimes = [...this.startTimes,...startTimeTmp]
				this.times = [...this.times,...timeTmp]
				this.timeArr = [...this.timeArr,...addRecord]
				let tmp = [0]
				let hourTmp = [hour]
				this.hourIndex = [...this.hourIndex,...hourTmp]
				this.minuteIndex = [...this.minuteIndex,...tmp]
				this.startHourIndex = [...this.startHourIndex,...hourTmp]
				this.startMinuteIndex = [...this.startMinuteIndex,...tmp]
			},
			chooseInvoiceType(e){
				if(e.detail.value==='person'){
					this.personFlag = true
					this.companyFlag = false
				}else if(e.detail.value==='company'){
					this.companyFlag = true
					this.personFlag = false
				}
			},
			changeStartDate(e,n){
				if( ( new Date(e.detail.value).getTime() ) < ( new Date(this.earliestDate).getTime() ) ){
					uni.showModal({
						content:'不能早于最早时间',
						showCancel:false
					})
				}else{
					this.timeArr[n-1].startDate = e.detail.value
				}
			},
			changeEndDate(e,n){
				if( ( new Date(e.detail.value).getTime() ) < ( new Date(this.timeArr[n-1].startDate).getTime() ) ){
					uni.showModal({
						content:'结束日期不能早于开始日期',
						showCancel:false
					})
				}else{
					this.timeArr[n-1].endDate = e.detail.value
				}
			},
			setInvoiceHead(e){
				this.personalInvoiceMsg.invoiceHead = e
				this.companyInvoiceMsg.invoiceHead = e
			},
			setCompanyTaxNumber(e){
				this.companyInvoiceMsg.taxNumber = e
			},
			setCompanyBank(e){
				this.companyInvoiceMsg.bankName = e
			},
			setCompanyBankAccount(e){
				this.companyInvoiceMsg.bankAccount = e
			},
			setCompanyAddress(e){
				this.companyInvoiceMsg.companyAddress = e
			},
			setCompanyPhone(e){
				this.companyInvoiceMsg.companyPhone = e
			},
			submit(){
				let timeArrResult = []
				for(let i=0; i < this.timeArr.length; i++) {
					let startTimeTmp = this.timeArr[i].startDate + ' ' + this.timeArr[i].startTime + ':00'
					let endTimeTmp = this.timeArr[i].endDate + ' ' + this.timeArr[i].endTime + ':00'
					let arrItem = [{'startTime':startTimeTmp,'endTime':endTimeTmp}]
					timeArrResult = [...timeArrResult,...arrItem]
				}
				let totalTimeGap = 0
				for(let i = 0; i<timeArrResult.length; i++) {
					let gap = new Date(timeArrResult[i].endTime) - new Date(timeArrResult[i].startTime)
					totalTimeGap = totalTimeGap + gap
				}
				totalTimeGap = totalTimeGap/3600000
				let invoiceMsg = {
					'invoiceTitle': '',
					'invoiceTypeValue': '0',
					'moduleTypeValue': '1',
					'companyPhone': '',
					'companyAddress': '',
					'bankNumber': '',
					'invoiceBank': '',
					'tfn': ''
				}
				if(this.personFlag){
					if(this.personalInvoiceMsg.invoiceHead===''){
						uni.showModal({
							content:'请先输入发票抬头',
							showCancel:false
						})
					}else{
						invoiceMsg.invoiceTitle = this.personalInvoiceMsg.invoiceHead
						uni.request({
							url:'http://192.168.3.172:3000/mock/27/v1/air/airApply/add',
							method:'POST',
							header:{
								'Content-Type':'application/json'
							},
							data:{
								tenantAccountId : '220000199609299199',
								timeList : timeArrResult,
								invoice : invoiceMsg,
								timeTotal : totalTimeGap,
								airPrice : this.singePrice,
								payTypeValue : this.alipayChecked ? '1' : '0',
								applyTotal : totalTimeGap * this.singePrice,
								proccessStatusValue : '0'
							},
							success: (res) => {
								if(res.data.code==='200'){
									console.log('添加成功')
									uni.showModal({
										content:'添加成功',
										showCancel:false
									})
									setTimeout(()=>{
										uni.navigateTo({
											url:'../history/history'
										})
									},2000)
								}else{
									console.log('添加失败')
								}
							}
						})
					}
				}
				if(this.companyFlag){
					if( (this.companyInvoiceMsg.invoiceHead==='')||(this.companyInvoiceMsg.taxNumber==='') ){
						uni.showModal({
							content:'请先输入发票相关信息',
							showCancel:false
						})
					}else{
						invoiceMsg.invoiceTitle = this.companyInvoiceMsg.invoiceHead
						invoiceMsg.invoiceTypeValue = '1'
						invoiceMsg.companyPhone = this.companyInvoiceMsg.companyPhone
						invoiceMsg.companyAddress = this.companyInvoiceMsg.companyAddress
						invoiceMsg.bankNumber = this.companyInvoiceMsg.bankAccount
						invoiceMsg.invoiceBank = this.companyInvoiceMsg.bankName
						invoiceMsg.tfn = this.companyInvoiceMsg.taxNumber
						uni.request({
							url:'http://192.168.3.172:3000/mock/27/v1/air/airApply/add',
							method:'POST',
							header:{
								'Content-Type':'application/json'
							},
							data:{
								tenantAccountId : '220000199609299199',
								timeList : timeArrResult,
								invoice : invoiceMsg,
								timeTotal : totalTimeGap,
								airPrice : this.singePrice,
								payTypeValue : "1",
								applyTotal : totalTimeGap * this.singePrice,
								proccessStatusValue : '0'
							},
							success: (res) => {
								console.log(res)
								if(res.data.code==='200'){
									console.log('添加成功')
									uni.showModal({
										content:'添加成功',
										showCancel:false
									})
									setTimeout(()=>{
										uni.navigateTo({
											url:'../history/history'
										})
									},2000)
								}else{
									console.log('添加失败')
								}
							}
						})
					}
				}
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
			
		},
		onReady() {
			let year = new Date().getFullYear()
			let month = new Date().getMonth()+1
			let date = new Date().getDate()
			let hour = new Date().getHours()+1
			month = month > 9 ? month : '0' + month
			date = date > 9 ? date : '0' + date
			hour = hour > 9 ? hour : '0' + hour
			let nowDate = year + '-' + month + '-' + date
			let nowTime = hour + ':00'
			let onReadyTime = nowDate + ' ' + nowTime + ':00'
			this.earliestTime = onReadyTime
			this.earliestDate = nowDate
			this.startHourIndex[0] = hour
			this.hourIndex[0] = hour
			this.timeArr[0].startDate = nowDate
			this.timeArr[0].endDate = nowDate
			this.timeArr[0].startTime = nowTime
			this.timeArr[0].endTime = nowTime
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.add-button{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-weight: 1000;
		font-size: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #F1F1F1;
	}
	.add-button::after{
		border: none;
	}
	.payway-style{
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}
	.first-radio{
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color:#FFFFFF;
		padding-left: 25rpx;
		border: solid 1rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.second-radio{
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color:#FFFFFF;
		padding-left: 25rpx;
		border: solid 1rpx #C8C7CC;
		border-right: none;
	}
	.payway-logo{
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.payway-choice{
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 1rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.invoice-group{
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.invoice-choice{
		display: flex;
		margin-left: 50rpx;
	}
	.confirm-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
	}
	.picker-block{
		height: 100rpx;
		background-color: #FFFFFF;
		width: 650rpx;
		display: flex;
		align-items: center;
		border: solid 1rpx #C8C7CC;
	}
	.picker-note{
		width: 200rpx;
		margin-left: 50rpx;
		justify-content: center;
	}
</style>
